import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity } from 'react-native';
import { Icon, List, Toast } from 'antd-mobile-rn';
import constants from '../utils/constants';

const styles = StyleSheet.create({
    Body: {
        position: "relative",
        width: "100%",
        height: "100%",
        backgroundColor: "#ffffff",
        flex:1
    },
    NavLayout: {
        flexDirection: "row",
        marginLeft: 20,
        paddingTop: 10,
        backgroundColor: "#ffffff",
        paddingBottom:10,
    },
    BottomView: {
        position: "absolute",
        top: 40,
        width: "100%",
        height: "100%",
        flex: 1,
        backgroundColor: "rgba(0,0,0,0.3)",
    },
    BottomViewList: {
        maxHeight: 265,
        borderWidth: 0
    },
    BottomViewListItemText: {
        color: "#222", fontSize: 16
    }
})

export default class NavSelection extends Component {

    state = {
        show: false
    }

    constructor(props) {
        super(props);
    }

    componentWillUnmount() {

    }

    onItemClick = (item, i) => {
        console.log("item::", item);
        this.props.onItemClick(item);
        this.setState({
            show: false
        });
    }

    componentDidMount() {

    }

    render() {

        const { items, selectedIndex, selectedItems, children } = this.props;

        let data = [];
        if (selectedIndex != null && selectedIndex != undefined) {
            data = items[selectedIndex].data ? items[selectedIndex].data : [];
        }


        const BottomView = this.state.show ? (
            <View
                style={styles.BottomView}
                onStartShouldSetResponder={() => {
                    this.setState({ show: false })
                }}
            >
                <List style={styles.BottomViewList}>
                    <ScrollView automaticallyAdjustContentInsets={false} >
                        {
                            data.map((item, i) => {
                                return (
                                    <List.Item
                                        onClick={() => {
                                            this.onItemClick(item, i);
                                        }}
                                        key={i}
                                        >
                                        <View style={{ padding: 10 }}>
                                            <Text style={styles.BottomViewListItemText}>{item.label}</Text>
                                        </View>

                                    </List.Item>
                                )
                            })
                        }
                    </ScrollView>
                </List>
            </View>
        ) : undefined;


        return (
            <View style={styles.Body}>
                <View style={styles.NavLayout}>
                    {
                        items.map((item, i) => {
                            return (
                                <View style={{ borderRightWidth: (i === (items.length - 1)) ? 0 : 1, borderColor: "#ddd" }} key={i}>
                                    <TouchableOpacity onPress={() => {
                                        this.props.onNavLabelClick(item, i);
                                        if (i == parseInt(selectedIndex) && this.state.show) {

                                            this.setState({
                                                show: false
                                            });
                                            return;
                                        }

                                        //
                                        //Toast.info(i + "--" + selectedIndex+"--"+this.state.show);



                                        if (item.data) {
                                            this.setState({
                                                show: true
                                            })
                                        } else {
                                            this.setState({
                                                show: false
                                            })
                                        }
                                    }}>
                                        <Text
                                            style={{
                                                paddingLeft: i > 0 ? 15 : 5,
                                                paddingRight: 15,
                                                fontSize: 16,
                                                color: selectedIndex == i ? constants.themeColor : "#666"
                                            }}
                                        >
                                            {selectedItems[i] ? selectedItems[i].label : item.name}
                                            {item.data ? <Icon color={selectedIndex == i ? constants.themeColor : "#666"} size={16} type={(selectedIndex == i && this.state.show) ? "up" : "down"} /> : ""}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            )
                        })
                    }

                </View>

                {children}

                {BottomView}


            </View>
        )

    }
}